<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="个人作品集 - 展示我的项目和技能" data-lang-zh="个人作品集 - 展示我的项目和技能" data-lang-en="Personal Portfolio - Showcasing My Projects and Skills">
    <meta name="keywords" content="作品集, 个人网站, 项目展示, 简历" data-lang-zh="作品集, 个人网站, 项目展示, 简历" data-lang-en="portfolio, personal website, project showcase, resume">
    <title data-lang-zh="我的作品集" data-lang-en="My Portfolio">我的作品集</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
    <header class="header">
        <nav class="navbar">
            <div class="nav-container">
                <div class="nav-logo">
                    <h1>我的作品集</h1>
                </div>
                <ul class="nav-menu">
                    <li class="nav-item">
                        <a href="#home" class="nav-link" data-lang-zh="首页" data-lang-en="Home">首页</a>
                    </li>
                    <li class="nav-item">
                        <a href="#about" class="nav-link" data-lang-zh="关于我" data-lang-en="About">关于我</a>
                    </li>
                    <li class="nav-item">
                        <a href="#projects" class="nav-link" data-lang-zh="项目" data-lang-en="Projects">项目</a>
                    </li>
                    <li class="nav-item">
                        <a href="#contact" class="nav-link" data-lang-zh="联系" data-lang-en="Contact">联系</a>
                    </li>
                </ul>
                <div class="language-switcher">
                    <button class="lang-btn active" data-lang="zh">中文</button>
                    <button class="lang-btn" data-lang="en">EN</button>
                </div>
                <div class="theme-switcher">
                    <button class="theme-btn" id="theme-toggle" title="切换主题">
                        <i class="fas fa-sun" id="theme-icon"></i>
                    </button>
                </div>
                <div class="hamburger">
                    <span class="bar"></span>
                    <span class="bar"></span>
                    <span class="bar"></span>
                </div>
            </div>
        </nav>
    </header>

    <main>
        <section id="home" class="hero">
            <div class="hero-content">
                <h2 class="hero-title" data-lang-zh="欢迎来到我的作品集" data-lang-en="Welcome to My Portfolio">欢迎来到我的作品集</h2>
                <p class="hero-subtitle" data-lang-zh="我是一名充满热情的开发者" data-lang-en="I am a passionate developer">我是一名充满热情的开发者</p>
                <button class="cta-button" onclick="scrollToSection('projects')" data-lang-zh="查看我的作品" data-lang-en="View My Work">查看我的作品</button>
            </div>
        </section>

        <section id="about" class="about">
            <div class="container">
                <h2 class="section-title" data-lang-zh="关于我" data-lang-en="About Me">关于我</h2>
                <div class="about-content">
                    <div class="about-text">
                        <p data-lang-zh="我是一名Python开发者，擅长消息中间件、实时数据处理和高可用架构设计。专注于构建高性能、可扩展的系统解决方案。" data-lang-en="I am a Python developer specializing in message middleware, real-time data processing, and high-availability architecture design. Focused on building high-performance, scalable system solutions.">我是一名Python开发者，擅长消息中间件、实时数据处理和高可用架构设计。专注于构建高性能、可扩展的系统解决方案。</p>
                        <p data-lang-zh="我热爱编程，对Rust语言有浓厚兴趣。闲暇时喜欢观看《幸运星》、《孤独摇滚》、《摇曳露营》等优秀动画作品。" data-lang-en="I love programming and have a strong interest in Rust language. In my free time, I enjoy watching excellent anime such as 'Lucky Star', 'Bocchi the Rock', and 'Laid-Back Camp'.">我热爱编程，对Rust语言有浓厚兴趣。闲暇时喜欢观看《幸运星》、《孤独摇滚》、《摇曳露营》等优秀动画作品。</p>
                        <p data-lang-zh="致力于将技术创新与实际应用相结合，为企业数字化转型提供强有力的技术支撑。" data-lang-en="Committed to combining technological innovation with practical applications, providing strong technical support for enterprise digital transformation.">致力于将技术创新与实际应用相结合，为企业数字化转型提供强有力的技术支撑。</p>
                        
                        <div class="skills">
                            <h3><i class="fas fa-tools"></i> <span data-lang-zh="技能" data-lang-en="Skills">技能</span></h3>
                            <ul class="skills-list">
                                <li><i class="fab fa-python" style="color: #3776ab;"></i> <span data-lang-zh="Python (专家级)" data-lang-en="Python (Expert)">Python (专家级)</span></li>
                                <li><i class="fas fa-database" style="color: #47a248;"></i> <span data-lang-zh="MongoDB (专家级)" data-lang-en="MongoDB (Expert)">MongoDB (专家级)</span></li>
                                <li><i class="fab fa-react" style="color: #61dafb;"></i> <span data-lang-zh="Next.js (高级)" data-lang-en="Next.js (Advanced)">Next.js (高级)</span></li>
                                <li><i class="fab fa-searchengin" style="color: #005571;"></i> <span data-lang-zh="ElasticSearch (高级)" data-lang-en="ElasticSearch (Advanced)">ElasticSearch (高级)</span></li>
                                <li><i class="fab fa-rust" style="color: #dea584;"></i> <span data-lang-zh="Rust (中级)" data-lang-en="Rust (Intermediate)">Rust (中级)</span></li>
                                <li><i class="fas fa-message" style="color: #ff6600;"></i> <span data-lang-zh="消息中间件" data-lang-en="Message Middleware">消息中间件</span></li>
                                <li><i class="fas fa-stream" style="color: #4caf50;"></i> <span data-lang-zh="实时数据处理" data-lang-en="Real-time Data Processing">实时数据处理</span></li>
                                <li><i class="fas fa-server" style="color: #2196f3;"></i> <span data-lang-zh="高可用架构" data-lang-en="High Availability Architecture">高可用架构</span></li>
                            </ul>
                        </div>
                        
                        <div class="experience">
                            <h3><i class="fas fa-briefcase"></i> <span data-lang-zh="专业经历" data-lang-en="Professional Experience">专业经历</span></h3>
                            <div class="timeline">
                                <div class="timeline-item">
                                    <div class="timeline-year">2010-2014</div>
                                    <div class="timeline-content">
                                        <h4 data-lang-zh="清华大学" data-lang-en="Tsinghua University">清华大学</h4>
                                        <p data-lang-zh="计算机科学与技术专业 · 本科" data-lang-en="Computer Science and Technology · Bachelor">计算机科学与技术专业 · 本科</p>
                                    </div>
                                </div>
                                <div class="timeline-item">
                                    <div class="timeline-year">2014-2016</div>
                                    <div class="timeline-content">
                                        <h4 data-lang-zh="斯坦福大学" data-lang-en="Stanford University">斯坦福大学</h4>
                                        <p data-lang-zh="计算机科学专业 · 硕士" data-lang-en="Computer Science · Master">计算机科学专业 · 硕士</p>
                                    </div>
                                </div>
                                <div class="timeline-item">
                                    <div class="timeline-year">2017-2020</div>
                                    <div class="timeline-content">
                                        <h4 data-lang-zh="Google" data-lang-en="Google">Google</h4>
                                        <p data-lang-zh="软件工程师 · 分布式系统" data-lang-en="Software Engineer · Distributed Systems">软件工程师 · 分布式系统</p>
                                    </div>
                                </div>
                                <div class="timeline-item">
                                    <div class="timeline-year">2021-2023</div>
                                    <div class="timeline-content">
                                        <h4 data-lang-zh="OpenAI" data-lang-en="OpenAI">OpenAI</h4>
                                        <p data-lang-zh="软件工程师 · AI基础设施" data-lang-en="Software Engineer · AI Infrastructure">软件工程师 · AI基础设施</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="achievements">
                            <h3><i class="fas fa-trophy"></i> <span data-lang-zh="个人成就" data-lang-en="Personal Achievements">个人成就</span></h3>
                            <ul class="achievements-list">
                                <li><i class="fas fa-graduation-cap" style="color: #8b4513;"></i> <span data-lang-zh="清华大学优秀毕业生" data-lang-en="Tsinghua University Outstanding Graduate">清华大学优秀毕业生</span></li>
                                <li><i class="fab fa-microsoft" style="color: #00a1f1;"></i> <span data-lang-zh="微软MVP (Most Valuable Professional)" data-lang-en="Microsoft MVP (Most Valuable Professional)">微软MVP (Most Valuable Professional)</span></li>
                                <li><i class="fas fa-certificate" style="color: #ff0000;"></i> <span data-lang-zh="华为开发者认证专家" data-lang-en="Huawei Developer Certified Expert">华为开发者认证专家</span></li>
                            </ul>
                        </div>
                    </div>
                    <div class="about-image">
                        <img src="images/joker1.jpg" alt="个人照片" class="profile-image">
                    </div>
                </div>
            </div>
        </section>

        <section id="projects" class="projects">
            <div class="container">
                <h2 class="section-title" data-lang-zh="我的项目" data-lang-en="My Projects">我的项目</h2>
                <div class="projects-grid">
                    <div class="project-card">
                        <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=800&h=600&fit=crop" alt="数据可视化平台" class="project-image">
                        <div class="project-info">
                            <h3 data-lang-zh="智能数据可视化平台" data-lang-en="Intelligent Data Visualization Platform">智能数据可视化平台</h3>
                            <p data-lang-zh="基于AI驱动的数据分析平台，提供实时数据洞察、交互式仪表板和预测分析功能，助力企业数字化转型。" data-lang-en="AI-driven data analysis platform providing real-time data insights, interactive dashboards, and predictive analytics to empower enterprise digital transformation.">基于AI驱动的数据分析平台，提供实时数据洞察、交互式仪表板和预测分析功能，助力企业数字化转型。</p>
                            <div class="project-links">
                                <a href="#" class="project-link">
                                    <i class="fas fa-eye"></i>
                                    <span data-lang-zh="查看演示" data-lang-en="View Demo">查看演示</span>
                                </a>
                                <a href="#" class="project-link">
                                    <i class="fab fa-github"></i>
                                    <span data-lang-zh="源代码" data-lang-en="Source Code">源代码</span>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="project-card">
                        <img src="https://images.unsplash.com/photo-1512941937669-90a1b58e7e9c?w=800&h=600&fit=crop" alt="移动应用开发" class="project-image">
                        <div class="project-info">
                            <h3 data-lang-zh="智能移动应用" data-lang-en="Intelligent Mobile Application">智能移动应用</h3>
                            <p data-lang-zh="原生跨平台移动应用，集成AI助手、实时协作、云端同步和智能推送功能，提供极致用户体验。" data-lang-en="Native cross-platform mobile application integrating AI assistant, real-time collaboration, cloud synchronization, and intelligent push notifications for ultimate user experience.">原生跨平台移动应用，集成AI助手、实时协作、云端同步和智能推送功能，提供极致用户体验。</p>
                            <div class="project-links">
                                <a href="#" class="project-link">
                                    <i class="fas fa-eye"></i>
                                    <span data-lang-zh="查看演示" data-lang-en="View Demo">查看演示</span>
                                </a>
                                <a href="#" class="project-link">
                                    <i class="fab fa-github"></i>
                                    <span data-lang-zh="源代码" data-lang-en="Source Code">源代码</span>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="project-card">
                        <img src="https://images.unsplash.com/photo-1555066931-4365d14bab8c?w=800&h=600&fit=crop" alt="电商平台" class="project-image">
                        <div class="project-info">
                            <h3 data-lang-zh="全栈电商解决方案" data-lang-en="Full-stack E-commerce Solution">全栈电商解决方案</h3>
                            <p data-lang-zh="企业级电商平台，集成AI推荐引擎、智能库存管理、多支付渠道和全渠道营销系统。" data-lang-en="Enterprise-level e-commerce platform integrating AI recommendation engine, intelligent inventory management, multiple payment channels, and omnichannel marketing system.">企业级电商平台，集成AI推荐引擎、智能库存管理、多支付渠道和全渠道营销系统。</p>
                            <div class="project-links">
                                <a href="#" class="project-link">
                                    <i class="fas fa-eye"></i>
                                    <span data-lang-zh="查看演示" data-lang-en="View Demo">查看演示</span>
                                </a>
                                <a href="#" class="project-link">
                                    <i class="fab fa-github"></i>
                                    <span data-lang-zh="源代码" data-lang-en="Source Code">源代码</span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section id="contact" class="contact">
            <div class="container">
                <h2 class="section-title" data-lang-zh="联系我" data-lang-en="Contact Me">联系我</h2>
                        <div class="contact-content">
                            <div class="contact-info">
                                <h3 data-lang-zh="联系方式" data-lang-en="Contact Information">联系方式</h3>
                                <p data-lang-zh="如果您对我的工作感兴趣，欢迎与我联系！" data-lang-en="If you are interested in my work, feel free to contact me!">如果您对我的工作感兴趣，欢迎与我联系！</p>
                                <div class="contact-details">
                                    <div class="contact-item">
                                        <i class="fas fa-envelope" style="color: #3498db;"></i>
                                        <strong data-lang-zh="邮箱：" data-lang-en="Email:">邮箱：</strong>
                                        <span id="email">kirineko@qq.com</span>
                                    </div>
                                    <div class="contact-item">
                                        <i class="fas fa-phone" style="color: #27ae60;"></i>
                                        <strong data-lang-zh="电话：" data-lang-en="Phone:">电话：</strong>
                                        <span id="phone">+86 138 0000 0000</span>
                                    </div>
                                    <div class="contact-item">
                                        <i class="fas fa-map-marker-alt" style="color: #e74c3c;"></i>
                                        <strong data-lang-zh="地址：" data-lang-en="Address:">地址：</strong>
                                        <span id="address" data-lang-zh="中国 北京" data-lang-en="Beijing, China">中国 北京</span>
                                    </div>
                                </div>
                                <div class="social-links-contact">
                                    <h4 data-lang-zh="社交媒体" data-lang-en="Social Media">社交媒体</h4>
                                    <div class="social-links">
                                        <a href="https://kirineko.github.io" target="_blank" class="social-link">
                                            <i class="fas fa-globe"></i>
                                            <span data-lang-zh="个人网页" data-lang-en="Personal Website">个人网页</span>
                                        </a>
                                        <a href="mailto:kirineko@qq.com" class="social-link">
                                            <i class="fas fa-envelope"></i>
                                            <span data-lang-zh="邮箱联系" data-lang-en="Email Contact">邮箱联系</span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <div class="contact-form">
                                <h3 data-lang-zh="发送消息" data-lang-en="Send Message">发送消息</h3>
                                <form id="contactForm">
                                    <div class="form-group">
                                        <label for="name" data-lang-zh="姓名：" data-lang-en="Name:">姓名：</label>
                                        <input type="text" id="name" name="name" required>
                                    </div>
                                    <div class="form-group">
                                        <label for="emailInput" data-lang-zh="邮箱：" data-lang-en="Email:">邮箱：</label>
                                        <input type="email" id="emailInput" name="email" required>
                                    </div>
                                    <div class="form-group">
                                        <label for="message" data-lang-zh="消息：" data-lang-en="Message:">消息：</label>
                                        <textarea id="message" name="message" rows="5" required></textarea>
                                    </div>
                                    <button type="submit" class="submit-button" data-lang-zh="发送消息" data-lang-en="Send Message">发送消息</button>
                                </form>
                            </div>
                        </div>
            </div>
        </section>
    </main>

    <footer class="footer">
        <div class="container">
            <p data-lang-zh="&copy; 2024 我的作品集. 保留所有权利." data-lang-en="&copy; 2024 My Portfolio. All rights reserved.">&copy; 2024 我的作品集. 保留所有权利.</p>
            <div class="social-links">
                <a href="https://kirineko.github.io" target="_blank" class="social-link">
                    <i class="fas fa-home"></i>
                </a>
                <a href="mailto:kirineko@qq.com" class="social-link">
                    <i class="fas fa-envelope"></i>
                </a>
            </div>
        </div>
    </footer>

    <!-- 返回顶部按钮 -->
    <button id="backToTop" class="back-to-top">
        <i class="fas fa-arrow-up"></i>
    </button>

    <script src="main.js"></script>
</body>
</html>